<script lang="ts" setup>
import { ClockCircleOutlined, EyeOutlined, TeamOutlined } from '@ant-design/icons-vue';

import type { PropType } from 'vue';

// 定义 props
const props = defineProps({
  data: {
    type: Object as PropType<{
      title: string;
      description: string;
      date: string;
      views: string;
      likes: string;
      comments: number;
      downloads: string;
      shares: string;
      username: string;
      favorites: string;
      tags: string[];
      image: string;
      link: string;
    }>,
    required: true,
  },
});

const handleOpenLink = (link: string) => {
  window.open(link);
};
</script>

<template>
  <div class="header">
    <img :src="data.image" style="width: 80%; object-fit: cover; margin-bottom: 1rem">

    <h2 class="header-title">
      {{ data.title }}
    </h2>

    <div class="header-meta-info">
      <a-row>
        <!-- <img :src="data.image" :alt="data.username" style="width: 10%;"> -->
        <span>
          <TeamOutlined class="icon" />
          {{ data.username }}

        </span>
        <span class="separator">|</span>
        <span>
          <EyeOutlined class="icon" />
          {{ data.views }}
        </span>
        <span class="separator">|</span>
        <span>
          <ClockCircleOutlined class="icon" />
          {{ data.date }}
        </span>
      </a-row>
      <a-row>
        <div class="header-tags">
          <span
            v-for="(tag, index) in data.tags"
            :key="index"
            class="header-tag"
          >
            {{ tag }}
          </span>
        </div>
      </a-row>
      <a-row>
        <button class="header-download-button" @click="handleOpenLink(data.link)">
          下载
        </button>
      </a-row>
    </div>
  </div>
</template>

<style scoped>
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: #fff;
  border-radius: 0.625rem; /* 10px */
  padding: 0 2.5rem 1.5rem;
  flex-direction: column;
  padding: 1rem;
}

.header-header {
  margin-bottom: 0.625rem; /* 0.625em */
}

.header-title {
  display: flex;
  justify-content: center;
  font-size: 1.7rem; /* 36px */
  font-weight: bold;
}

.header-download-button {
  background-color: #2468F2;
  color: #fff;
  border: none;
  font-size: 1.1rem; /* 18px */
  padding: 0.625rem 1.25rem; /* 10px 20px */
  border-radius: 0.5rem; /* 4px */
  margin-right: 0.2rem; /* 15px */
}

.header-download-button:hover {
  background-color: #3867ea;
  color: #fff;
}

.header-meta-info {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 0.9375rem; /* 0.9375em */
  margin-top: 0.625rem; /* 0.625em */
  font-size: 1.125rem; /* 18px */
}

.header-meta-info span {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-around;

  .icon {
  width: 2rem;
  margin-right: 0.5rem;
  }
}

.separator {
  margin: 0.25rem 0.625rem; /* 4px 10px */
}

.header-tags {
  display: flex;
  justify-items: flex-start;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 0.9rem; /* 0.9em */
  margin-bottom: 0.9rem;
}

.header-tag {
  background: #f2f2f4;
  color: #333;
  border-radius: 0.1875rem; /* 0.1875em */
  padding: 0.5rem 0.625rem; /* 0.5em 0.625em */
  font-size: 1rem; /* 16px */
}
</style>
